超碰97人人干I97人人爽I婷婷5月激情5月I国偷自产中文字幕亚洲手机在线I国产精品99久久免费黑人I99自拍视频在线观看I亚洲日本va在线观看I亚洲精品色I一区三区视频I日日干天天射

咨詢熱線:

17661095540

聯系QQ:

2863379292

官方微信:

如何在微信小程序的頁面間傳遞數據?

微信營銷

導讀:使用全局變量 在初始化代碼的時候,小程序會讀取一個app.js的文件,在這里我們可以定義我們所需要的全局變量。});//page.js ...var app = getApp()var getFoo = app.globalData

發表日期:2019-10-20

文章編輯:興田科技

瀏覽次數:9068

標簽:

在微信小程序的開發中,我們會經常遇到頁面間數據傳遞或者相互影響的問題。在實際的開發過程中,可以通過以下幾種方法來實現。

使用全局變量

全局變量實際上是定義了一個全局的對象,并在每個頁面中引入。

在初始化代碼的時候,小程序會讀取一個app.js的文件,在這里我們可以定義我們所需要的全局變量。

//app.js ...App({globalData: {foo:'bar' }

});

然后在頁面中,可以通過getApp()方法獲取到全局應用對象,可以對全局變量進行讀取并更改:

//page.js ...var app = getApp()var getFoo = app.globalData.foo app.globalData.foo ='fun'

由于app.js在項目中是用來做基礎配置的,因此不建議將很多變量放在這里配置。一般情況下會將一些持久化的常量配置在這里,對于經常需要變動的量不建議用這個方法。

使用本地緩存

本地緩存是微信小程序提供的一個功能,可以將用戶產生的數據做本地的持久化,類似于 NoSQL,可以進行讀取和修改的操作。

那么在不同的頁面之間,如何利用它,進行數據的交互呢?

假設我們在 A 頁面保存了用戶的信息。

// pageA.js...var developer = {

name:'raymond',

gender:'male' }

wx.setStorageSync('developer', developer);

這樣做,這個數據就存在了本地。當在 B 頁面需要使用的時候,可以直接的獲取到數據池中的數據,并進行 CRUD 操作:

//pageB.js ...// Retrievevar developer = (wx.getStorageSync('developer') || [])// Update developer.name ='Jiayang' wx.setStorageSync('developer', developer);// Delete wx.removeStorage({

key:'developer' })

需要注意的是,在回到 A 頁面的時候,小程序需要重新讀取數據。這時候,可以選擇放在生命周期的onShow中對數據重新加載

父級往子級頁面(模板)的數據傳遞

我們通常會在頁面之間進行跳轉、重定向的操作。這時候,我們可以選擇將部分數據放在url里面,并在新頁面onLoad的時候進行初始化。

pageC.js ...// Navigatewx.navigateTo({url:'../pageD/pageD?name=raymond&gender=male',

})// Redirectwx.redirectTo({url:'../pageD/pageD?name=raymond&gender=male',

})

在 D 頁面中,我們可以這樣接收到到所傳進來的參數:

// pageD.js ...

page({

onl oad: function(option){

console.log(option.name +'is' +option.gender)

this.setData({option:option })

}

})

wx.navigateTo和wx.redirectTo不允許跳轉到 tab 所包含的頁面,只能用wx.switchTab跳轉。需要注意的是,wx.switchTab中的url不能傳參數。

微信新提供的wx.reLaunch接口可以傳入參數。

另外,在頁面中我們通常會用到一些組件模板,因此在父子之間也會有相應的數據傳遞。

使用name屬性,作為模板的名字。然后在這里面使用is屬性,聲明需要的使用的模板。

{{index}}: {{msg}}Time: {{time}}

然后將模板所需要的data傳入,如:

<templateis="msgItem"data="{{...item}}"/>

page({data: {item: {index:0,msg:'this is a template',time:'2016-09-15' }

}

})

傳入模板的除了變量,還可以是事件方法對象。例如,模板中的點擊事件,可以傳遞到使用模板的元素中。

通過獲取到頁面對象進行數據操作

這個方法的精髓,是通過獲取到其他頁面的對象原型,然后通過原型方法setData對當前對象管理的data進行修改,示例如下:

//pageE.js ...page({data: {index:1 }

})

當跳轉到下一個頁面 F 之后,假定在 F 中有操作需要對 E 中的數據有修改,則可以使用以下方法:

pageF.js

...

page({

changeIndexInE:function(){var pages = getCurrentpages();var prevpage = pages[pages.length -2];

prevpage.setData({

index:0 })

}

})

這個方法可以操作頁面堆棧里面的頁面的數據,可以做到讓后一級頁面對上級頁面群的數據管理。

小結

在微信小程序中有以上并且不局限于以上幾種的方式進行頁面間數據傳遞、交互,在實際應用中可以組合使用。比如說:

●一些常量,可以交由app.js管理;需要持久化的量可以放在本地保存。

●涉及到下級頁面或者模板元素的數據,可以通過傳入參數的方式傳入。

●后級頁面可以通過獲取堆棧里的頁面對象快速修改上級的數據。

在實際應用中結合使用,可以更好地管理小程序的數據。

本文如有不周到之處,可以留言進行討論。

相關推薦

更多新聞

  • 8-25

    2023

    微信營銷 / 2023-08-25

    克孜勒蘇網站開發- 完美展現您的在線品牌形象的方式

    隨著越來越多的人使用移動設備瀏覽互聯網,克孜勒蘇網站開發必須采用響應式設計。這意味著您的網站會根據訪問設備的屏幕大小和分辨率自動調整布局和元素。這樣可以確保您的網站在不同設備上都能提供良好的用戶體驗,并避免讓訪客感到困惑或挫敗。

    View details

  • 6-25

    2020

    微信營銷 / 2020-06-25

    作為企業的微信運營者如何做好企業的微信運營

    這是移動互聯網的時代,如今微信用戶已經達到7億,而微信朋友圈也逐漸取代各種論壇、博客發帖、空間說說、發微博等等社交網站,人們在朋友圈發心情、曬美食美照,基于強關系和海量

    View details

  • 8-28

    2023

    微信營銷 / 2023-08-28

    呼和浩特網絡推廣

    如今,隨著移動互聯網的普及,人們通過網絡獲取信息和購買產品的習慣也發生了巨大變化。呼和浩特是內蒙古地區的經濟中心,網絡用戶數量不斷攀升。因此,通過呼和浩特網絡推廣,企業可以更廣泛地觸達潛在客戶,提高品牌知名度,增加銷售機會,進而實現業務增長和利潤提升。

    View details

  • 8-25

    2023

    微信營銷 / 2023-08-25

    興安盟網站開發:為您的業務找到最佳在線展示平臺

    興安盟網站開發為您的業務提供了一個在線展示平臺,以吸引潛在客戶、提高品牌知名度和推廣業務。通過充分利用興安盟網站開發團隊的專業知識和經驗,您可以創建一個與您的品牌風格一致、功能完善的網站。不要猶豫,現在就開始興安盟網站開發,為您的業務找到最佳在線展示平臺!

    View details